<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding">

            <div class="card-title-wrap">
                <span>{{ 'edit' == type ? '编辑' : '详情' }}</span>
                <span></span>
            </div>

            <el-form ref="form" :rules="rules" :model="form" label-width="100px"
                     label-position="left">

                <el-row :gutter="30">

                    <el-col :span="24">
                        <el-form-item label="客户名称:" prop="primaryCustomerName">

                            <span>{{ form.primaryCustomerName|filterNull }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="共用额度客户:">
                        </el-form-item>
                    </el-col>

                    <el-col v-if="'edit'==type" style="display: flex" :span="12">
                        <span style="flex: 1"></span>
                        <el-button type="primary" @click="publicOpen=true">新增</el-button>
                    </el-col>

                    <el-col :span="24">
                        <el-table border style="margin-bottom: 20px"
                                  :data="dataList">
                            <el-table-column
                                type="index" align="center"
                                label="序号"
                                width="80">
                            </el-table-column>
                            <el-table-column
                                prop="secondaryCustomerId" align="center"
                                label="客户编码"
                                min-width="100">
                            </el-table-column>
                            <el-table-column
                                prop="secondaryCustomerName" align="center"
                                label="客户名称"
                                min-width="100">
                            </el-table-column>
                            <el-table-column align="center"
                                             prop="customerPhone" min-width="100"
                                             label="联系电话">
                            </el-table-column>
                            <el-table-column v-if="'edit'==type" label="操作" min-width="80" align="center"
                                             class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                    <e-button size="mini" type="text"
                                              @click="handleDelete(scope.row, scope.$index)"
                                              >删除
                                    </e-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-if="'edit' == type" type="textarea"
                                      v-model="form.remark" clearable maxlength="500"
                                      placeholder="请输入备注"></el-input>
                            <span v-else>{{form.remark|filterNull}}</span>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>


        </div>

        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">{{'edit'==type?'取消':'返回'}}</el-button>
            <el-button v-if="'edit'==type" :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
        </div>

        <!--    共用额度客户-->
        <el-dialog title="新增" :visible.sync="publicOpen" append-to-body width="45%">
            <el-form ref="publicForm" :rules="publicRules" :model="publicForm" label-width="120px">

                <el-row>
                    <el-col :span="20">
                        <el-form-item label="共用额度客户:" prop="secondaryCustomerIdList">
                            <el-select v-model="publicForm.secondaryCustomerIdList"
                                       clearable filterable style="width: 100%">
                                <template v-for="dict in shareMemberList">
                                    <el-option :label="dict.customerName" :value="dict.customerId" :key="dict.customerId"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="publicCancel">取 消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="addcomit" >确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {quotaSharing, quotaSharingDelete, quotaSharingAdd, getCustomerList} from "@/api/memberManage/memberList";


export default {
    name:"ShareMemberDetail",
    dicts: [],
    data() {
        return {
            publicOpen: false,
            buttonLoading: false,
            form: {},
            rules: {
                customerTypeCode: [
                    {
                        required: true,
                        message: '请选择客户类型',
                        trigger: 'change'
                    }
                ],
            },
            dataList: [],
            type: null,
            // 表单校验
            publicRules: {
                secondaryCustomerIdList: [
                    {required: true, message: "共用额度客户不能为空", trigger: "change"}
                ],
            },
            publicForm: {
                secondaryCustomerIdList:''
            },
            shareMemberList:[],
            memberList:[],
        };
    },
    watch:{
        '$route':{
            handler(val){
                console.log('this.$route', this.$route)

                if(val && val.name==this.$options.name){
                    if (this.$route.query && this.$route.query.primaryCustomerId && !this.$route.query.tabClick) {
                        this.form.quotaSharingId = this.$route.query.quotaSharingId
                        this.form.primaryCustomerId = this.$route.query.primaryCustomerId
                        this.form.primaryCustomerName = this.$route.query.primaryCustomerName
                        // this.form.remark = this.$route.query.remark
                        this.$set(this.form, "remark", this.$route.query.remark);
                        this.getOldData(this.$route.query.primaryCustomerId)
                    }
                    else if(!this.$route.query.tabClick){
                        this.form = {}
                        this.dataList = []
                    }

                    this.type = this.$route.query.type

                    const title =  this.$route?.query?.pageType??'共用额度客户'
                    const route = Object.assign({}, this.$route, { title: `${title}` })
                    this.$store.dispatch('tagsView/updateVisitedView', route)

                    this.getMember()
                }
            },
            immediate:true,
            deep:true
        }
    },
    // mounted() {
    //     console.log('==>', this.$route.query)
    //
    //
    //     if (this.$route.query && this.$route.query.primaryCustomerId) {
    //         this.getOldData(this.$route.query.primaryCustomerId)
    //     }
    //
    //
    // },
    // watch:{
    //     dataList:{
    //         handler(val){
    //             this.shareMemberList = this.memberList.filter(item=>item.customerId != this.form.primaryCustomerId)
    //             if(val && val.length>0){
    //                 const idlist = val.map(item=>item.secondaryCustomerId)
    //                 this.shareMemberList = this.shareMemberList.filter(item=>idlist.indexOf(item.customerId)<0)
    //             }
    //
    //         },
    //         deep:true,
    //         immediate:true
    //     }
    // },
    methods: {
        getMember(){
            getCustomerList({
                pageNum: 1,
                pageSize: 1000000,
            }).then(res => {
                if (res.code == "200") {
                    this.memberList = res.rows
                    this.shareMemberList = this.memberList.filter(item=>item.customerId != this.form.primaryCustomerId)
                }
            });

        },
        addcomit(){
            this.$refs["publicForm"].validate(valid => {
                if (valid) {

                    if(this.dataList.find(item=>item.secondaryCustomerId == this.publicForm.secondaryCustomerIdList)){
                        this.$modal.msgError("该共用额度客户已存在")
                        return
                    }

                    let find = this.shareMemberList.find(item=>item.customerId==this.publicForm.secondaryCustomerIdList);
                    if(find){
                        this.dataList.push({
                            secondaryCustomerId:find.customerId,
                            secondaryCustomerName:find.customerName,
                            customerPhone:find.customerPhone,
                        })
                    }
                    this.publicOpen = false;
                    this.publicForm = {
                        secondaryCustomerIdList:''
                    }
                }
            });

        },
        // 取消按钮
        publicCancel() {
            this.publicOpen = false;
            this.publicForm = {
                secondaryCustomerIdList:''
            }
        },
        cancel() {
            this.$router.back();
this.$store.dispatch('tagsView/delView', this.$route);
        },
        getOldData(customerId) {
            quotaSharing(customerId).then(res => {
                this.dataList = res.data??[]
            })
        },
        submitForm() {
            let that = this

            console.log('that.form', that.form)

            that.form.secondaryCustomerIdList = this.dataList.map(item => item.secondaryCustomerId)
            that.form.secondaryCustomerNameList = this.dataList.map(item => item.secondaryCustomerName)

            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;
                    quotaSharingAdd(that.form).then(res => {
                        this.buttonLoading = false;
                        this.$modal.msgSuccess("提交成功");
                        this.$router.back();
this.$store.dispatch('tagsView/delView', this.$route);
                    }).finally(e => {
                        this.buttonLoading = false;
                    })
                }
            });

        },
        /** 删除按钮操作 */
        handleDelete(row, index) {
            this.dataList.splice(index, 1)

        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 15px;
    width: 70%;
}


</style>
